<template>
  <div  ref="main" style="width: 100%;height: 100%;margin: 0 auto; background-color: #FFFFFF;" ></div>
</template>

<script>
  export default{
    props:{
      echartsData:Object
    },
    data(){
      return{
        data:{},

        showData:[],
        links:[]
      }
    },
    watch:{
      echartsData:function(newValue){
        this.data = newValue
        // 数据处理
        this.detailData(this.data)
        this.initCarts()
      },
      deep:true
    },
    mounted() {
      this.initCarts()
    },
    methods:{
      // 处理数据
      detailData(data){
        this.showData = []
        this.links = []

        var obj = {
          name: data.entity,
          draggable: true,
          itemStyle: {
              normal: {
                  color: "#E6A23C",
              }
          }
        }
        this.showData.push(obj)

        // 遍历数据
        data.to.map(val => {

          // data
          var obj1 = {
            name: '',
            draggable: true,
            itemStyle: {
                normal: {
                    color: "#5793f3",
                }
            }
          }
          obj1.name = val.entity
          this.showData.push(obj1)

          // link
           var link = {
             source: '',
             target: data.entity,
             value: ''
           }
           link.source = val.entity
           link.value = val.relation

           this.links.push(link)
        })

        // console.log(this.showData)

        // console.log(this.links)


      },
      // 初始化图表
      initCarts(){
       let myChart = this.$echarts.init(this.$refs.main);
          var colors = ["#5793f3", "#d14a61", "#675bba"];
          let option = {
              title: {
                  text: ''
              },
              tooltip: {},
              animationDurationUpdate: 1500,
              animationEasingUpdate: 'quinticInOut',
              label: {
                  normal: {
                      show: true,
                      textStyle: {
                          fontSize: 12
                      },
                  }
              },
              series: [

                  {
                      type: 'graph',
                      layout: 'force',
                      symbolSize: 45,

                      // 鼠标聚焦只展示时相关联的
                      focusNodeAdjacency: true,

                      // 加箭头
                      edgeSymbol:['arrow'],
                      // 箭头大小
                      edgeSymbolSize:10,

                      roam: true,
                      label: {
                          normal: {
                              show: true,
                              textStyle: {
                                  fontSize: 12
                              },
                          }
                      },
                      force: {
                          repulsion: 1000
                      },
                      edgeLabel: {
                          normal: {
                              show: true,
                              textStyle: {
                                  fontSize: 10
                              },
                              formatter: "{c}"
                          }
                      },
                      data: this.showData,
                      links: this.links,
                      lineStyle: {
                          normal: {
                              opacity: 0.9,
                              width: 1,
                              curveness: 0
                          }
                      }
                  }
              ]
          };
          myChart.setOption(option);
      }
    }
  }
</script>

<style>
</style>
